<template>
    <ul :class="['table-columns',{'flex':flex}]" :key="prop">
        <li :class="['table-title',textAlign]" :key="prop" :style="{...style}">{{label}}</li>
        <li :class="['table-cell',textAlign,{'hightlight':index===dataSource.length-1 && hightlight}]" v-for="(item, index) in dataSource" :key="item.id">
          <slot name="default" :data="item" :value="item[prop]">
            {{item[prop]}}
          </slot>
        </li>
    </ul>
</template>

<script lang='ts'>
import { PropType, ref } from "vue"
import { TableCell, HeaderStyle, RealHeaderStyle, TableLayout, TableAlign } from "@types"

export default {
   props: {
      dataSource: {
         type: Array as PropType<TableCell[]>,
         default: () => []
      },
      prop: {
         type: String,
         default: ""
      },
      label: {
         type: String,
         require: true
      },
      headerStyle: Object as PropType<HeaderStyle>, // 由表格传过来的
      layout: {
         type: String as PropType<TableLayout>,
         default: "horizon"
      },
      width: {
         type: String,
         default: ""
      }, // 单列
      align: {
         type: String as PropType<TableAlign>,
         default: "left"
      },
      flex: Number,
      hightlight: Boolean
   },

   setup (props, context) {
      const style = ref<RealHeaderStyle>({})
      const textAlign = ref(props.align)
      const colWidth = ref(props.width)
      // 默认样式与自定义样式
      const HS = props.headerStyle || undefined
      if (props.layout === "horizon") {
      // 【头左体右】表格
         style.value.minWidth = "180px" // 默认样式
         if (HS) {
            style.value = {
               ...style.value,
               ...HS
            }
         }
      } else {
      // 正常方向表格 【头上体下】表格
         if (HS) {
            style.value = { ...HS }
            if (HS.width) {
               style.value.minWidth = HS.width // 避免头部的宽度小于内容宽度
            }
            if (HS.height) {
               style.value.minHeight = HS.height
               style.value.lineHeight = HS.height
            }
         }
         if (colWidth.value) {
            style.value.minWidth = colWidth.value // 列的样式覆盖表格的样式
         }
      }

      return {
         style,
         textAlign
      }
   }
}

</script>

<style lang="less">

.table-cell,.table-title{
  padding: 8px;
}
.flex{
   flex: 1;
}
.hightlight{
   background-color: @success;
}

.table-columns{
    .center{
      text-align: center;
    }
    .left{
      text-align: left;
    }
    .right{
      text-align: right;
    }
}

</style>
